<template>
	<view class="wrap">
    <view class='sn-box'>
      <view class="title">其它资料</view>
      <view class="content">
        <view class="item upload-box" @click="save">
          <text class="ebao-iconfont ebao-yunshangchuan"></text>
          上传图片
        </view>
        <view class="item" v-for="(item,index) in imgList" :key="index">
          <image @click="previewImage(item)" :src="item" mode="aspectFill"/>
          <view class="del-box" @click="delTip(index)">
            <text class="ebao-iconfont ebao-ic_close"></text>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
  import {
    getAdminOrderDetail,
    getAdminRefundDetail,
    getStoreOrderDetail,
    getStoreRefundDetail, saveSnImg, uploadSnImg
  } from "../../../api/admin";
	export default {
		mixins:[colors],
		data() {
			return {
        nowItem: {},
        imgList:[]
			}
		},
		onLoad(options) {
      if(options.order_id){
        this.statusType=options.statusType
        this.order_id=options.order_id
        this.getIndex()
      }
      uni.$on('isUpdateCard', res => {
        const { type, base64 } = res
        this.uploadSnImg(base64)

      })
		},
		onUnload() {
      uni.$off()
      //   设置标题颜色
      setTimeout(()=>{
        uni.setNavigationBarColor({
          frontColor: 'fff',
          backgroundColor: '#1793f9',
        })
      },300)
    },
		methods: {
      uploadSnImg(base64){
        uploadSnImg(this.nowItem.id,{imgData:base64}).then(res=>{
          this.imgList.push(res.data.url)
          this.saveSnImg()
        })
      },
      saveSnImg(){
        saveSnImg(this.nowItem.id,{sn_detail:this.imgList}).then(res2=>{
          this.$util.Tips({title:'保存成功'})
        })
      },
      previewImage(urls) {
        uni.previewImage({
          current: urls,
          urls: [urls]
        });
      },
      getIndex: function() {
        let that = this;
        let obj = '';
        if (that.statusType == -3) {
          let funApi = '';
          if(this.storeNum){
            funApi = getAdminRefundDetail(that.order_id);
          }else{
            funApi = getStoreRefundDetail(that.order_id);
          }
          obj = funApi;
        } else {
          let funApi = '';
          if(this.storeNum){
            funApi = getAdminOrderDetail(that.order_id);
          }else{
            funApi = getStoreOrderDetail(that.order_id);
          }
          obj = funApi;
        }
        uni.showLoading({
          title: '加载中',
        })
        obj.then(res => {
          uni.hideLoading()
          that.nowItem = res.data;
          this.imgList=this.nowItem.order_lease.sn_detail
        })
      },
			save(){
        uni.navigateTo({
          url: '/pages/users/card_camera/index',
        })
			},
      delTip(index){
        let that=this
        uni.showModal({
          title: '提示',
          content: '确定删除该图片？',
          success: function(res) {
            if (res.confirm) {
              that.imgList.splice(index,1)
              that.saveSnImg()
            }
          }
        })
      }
		}
	}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20rpx;
}
.sn-box{
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  .title{
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .item{
      width: 50%;
      height: 260rpx;
      padding: 0 10rpx;
      margin-bottom: 30rpx;
      position: relative;
      .del-box {
        position: absolute;
        top: -6px;
        right: 6rpx;
        background: #fff;
        border-radius: 50%;
        .ebao-iconfont{
          font-size: 30rpx;
          color: red;
        }
      }
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
}

  .bg-color{
      background: #1793f9 !important;
    }
  .keepBnt {
    width: 90vw;
    height: 86rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 86rpx;
    font-size: 32rpx;
    color: #fff;
    position:fixed;
    left:5vw;
    bottom:50rpx;
    z-index:10;
  }
  .upload-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1rpx dashed #ccc;
    font-size: 28rpx;
    color: #888;
    .ebao-iconfont{
      color: #1793f9;
      font-size: 100rpx;
    }
  }
</style>
